<template>
    <view class="content">
        <navView navTitle="请假申请" titleColor="#fff" :isBack="true"></navView>
        <view class="form-container">
            <!-- 请假类型 -->
            <view class="form-item">
                <text class="label">请假类型:</text>
                <uni-data-select style="width: 70%;" :clear="false" v-model="formData.type"
                    :localdata="leaveTypes"></uni-data-select>
            </view>

            <!-- 请假时间 -->
            <view class="form-item">
                <text class="label">开始时间:</text>
                <uni-datetime-picker type="datetime" v-model="formData.start_time" 
                    @change="calculateHours" />
            </view>

            <view class="form-item">
                <text class="label">结束时间:</text>
                <uni-datetime-picker type="datetime" v-model="formData.end_time" 
                    @change="calculateHours" />
            </view>

            <!-- 自动计算时长 -->
            <view class="form-item">
                <text class="label">请假时长:</text>
                <input class="input" type="number" v-model="formData.hour" 
                    placeholder="自动计算" disabled />
                <text class="unit">小时</text>
            </view>

            <!-- 请假事由 -->
            <view class="form-item column">
                <text class="label">事由说明:</text>
                <textarea class="textarea" v-model="formData.remarks" 
                    placeholder="请输入详细事由" auto-height />
            </view>

            <!-- 附件上传 -->
            <view class="form-item column">
                <text class="label">证明材料:</text>
                <uni-file-picker v-model="formData.file_ids" 
                    fileMediatype="image" 
                    limit="5"
                    title="最多上传5个文件"></uni-file-picker>
            </view>

            <!-- 提交按钮 -->
            <button class="submit-btn" @click="handleSubmit">提交申请</button>
        </view>
    </view>
</template>

<script>
export default {
    data() {
        return {
            formData: {
                type: "事假",
                start_time: "",
                end_time: "",
                hour: 0,
                remarks: "",
                file_ids: []
            },
            leaveTypes: [
                { value: "事假", text: "事假" },
                { value: "病假", text: "病假" },
                { value: "年假", text: "年假" },
                { value: "调休", text: "调休" }
            ]
        };
    },
    methods: {
        calculateHours() {
            if (this.formData.start_time && this.formData.end_time) {
                const start = new Date(this.formData.start_time)
                const end = new Date(this.formData.end_time)
                const diff = end - start
                this.formData.hour = (diff / 3600000).toFixed(1)
            }
        },
        handleSubmit() {
            this.$request('/addons/qingdong/leave/apply', 'POST', {
                ...this.formData,
                file_ids: this.formData.file_ids.map(file => file.url).join(',')
            }).then(res => {
                if (res.code === 1) {
                    uni.showToast({ title: '提交成功' })
                    setTimeout(() => uni.navigateBack(), 1500)
                }
            })
        }
    }
}
</script>

<style scoped lang="scss">
.column {
    flex-direction: column !important;
    align-items: flex-start !important;
    
    .textarea {
        width: 100%;
        min-height: 200rpx;
        padding: 20rpx;
        margin-top: 20rpx;
        border: 1rpx solid #eee;
        border-radius: 8rpx;
    }
    
    .uni-file-picker {
        width: 100%;
        margin-top: 20rpx;
    }
}

.unit {
    margin-left: 20rpx;
    color: #666;
}

// 保持原有表单样式继承自contractForm.vue
</style>
